//
//  SwiftUIStack.swift
//  SwiftUICode
//
//  Created by yangkl on 2024/2/19.
//

import SwiftUI

struct SwiftUIStack: View {
    var body: some View {
        VStack(spacing: 20){
            // 顶部
            HeadView()
            
            
            // Basic and Pro
            HStack(spacing:15) {
                PlanView(title: "Basic", price: "$9", textColor: .white, bgColor: .purple)
                ZStack{
                    PlanView(title: "Pro", price: "$18", textColor: .black, bgColor: Color(red: 240/255, green: 240/255, blue: 240/255))
                    
                    Text("Best for designer")
                        .font(.system(.caption, design: .rounded))
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .padding(5)
                        .background(Color(red: 255/255, green: 183/255, blue: 37/255))
                        .offset(x:0, y: 88)
                }
            }
            
            // Team
            ZStack{
                PlanView(title: "Team", price: "$299", textColor: .white, bgColor: Color(red: 62/255, green: 63/255, blue: 70/255), icon: "wand.and.rays")
                
                Text("Perfect for teams with 20 members")
                    .font(.system(.caption, design: .rounded))
                    .fontWeight(.bold)
                    .foregroundColor(.white)
                    .padding(5)
                    .background(Color(red: 255/255, green: 183/255, blue: 37/255))
                    .offset(x:0, y: 110)
            }
            
            Spacer()
        }
        .padding(.horizontal)
        
    }
}

struct HeadView: View {
    var body: some View {
        HStack{
            VStack(alignment: .leading, spacing: 2){
                Text("Choose")
                    .font(.system(.largeTitle, design: .rounded))
                    .fontWeight(.black)
                Text("Your Plan")
                    .font(.system(.largeTitle, design: .rounded))
                    .fontWeight(.black)
            }
            Spacer()
        }
        
    }
}

struct PlanView: View{
    var title: String
    var price: String
    var textColor: Color
    var bgColor: Color
    var icon: String?
    
    var body: some View{
        VStack{
            if icon != nil {
                Image(systemName: icon!)
                    .font(.largeTitle)
                    .foregroundColor(textColor)
            }
            Text(title)
                .font(.system(.title, design: .rounded))
                .fontWeight(.black)
                .foregroundColor(textColor)
            
            Text(price)
                .font(.system(size: 40, weight: .heavy, design: .rounded))
                .foregroundColor(textColor)
            
            Text("per month")
                .font(.system(.headline, design: .rounded))
                .foregroundColor(textColor)
            
        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100)
        .padding(40)
        .background(bgColor)
        .cornerRadius(10)
    }
}

#Preview {
    SwiftUIStack()
}
